<template>
  <div class="real-time" :style="computedStyles">
    <span class="date_item date" v-if="judgeIsShow(isShowDate)">{{
      date
    }}</span>
    <span class="date_item time" v-if="judgeIsShow(isShowTime)">{{
      time
    }}</span>
    <span class="date_item week_day" v-if="judgeIsShow(isShowWeekDay)">{{
      weekDay
    }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, Ref, defineProps, withDefaults } from 'vue';
import { formatDate } from "@/utils/util";
import useThemeConfigStore from "@/store/themeConfig";
import { storeToRefs } from "pinia";

const themeConfigStore = useThemeConfigStore();
const { themeFontSize } = storeToRefs(themeConfigStore);

const computedStyles = computed(() => {
  return {
    fontSize: props.fz || themeFontSize.value,
  };
})

// 接口
interface DateFieldProps {
  isShowAll?: boolean;
  isShowDate?: boolean;
  isShowTime?: boolean;
  isShowWeekDay?: boolean;
  fz?: string,
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<DateFieldProps>(), {
  isShowAll: true,
  isShowDate: true,
  isShowTime: true,
  isShowWeekDay: true,
  fz: '',
});

// 判断Date Time WeekDay是否显示
const judgeIsShow = (params: boolean): boolean => {
  return props.isShowAll && params;
};

/** 时间 **/
const date = ref<string>("");
const time = ref<string>("");
const weekDay = ref<string>("");
const getDateTime = (): void => {
  date.value = formatDate(new Date(), "YYYY年MM月DD日");
  time.value = formatDate(new Date(), "hh:mm:ss");
  weekDay.value = formatDate(new Date(), "星期WW");
};
const timer: Ref<NodeJS.Timer | any> = ref(null);
onMounted(() => {
  getDateTime();
  if(props.isShowTime) {
    timer.value = setInterval(() => {
      getDateTime();
    }, 1000);
  }
});
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
/** 时间结束 **/
</script>

<style scoped lang="scss">
.date_item {
  margin: 0 2px;
}
</style>
